<template>
	<view class="">
		<div class="swiper-content">
			<uni-swiper-dot :info="bannerList" :current="swiperDotCurrent" field="content" mode="default">
				<swiper class="swiper-box" @change="swiperChange">
					<swiper-item v-for="(item, index) in bannerList" :key="index" @click="jumpClick(item.url)">
						<view>
							<image class="swiper-image" :src="item.image" mode="widthFix"></image>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</div>
		<view class="section_fun">
			<view class="fun_content">
				<view class="fc_upper">
					<view class="upper_item border-r" @click="jumpClick('/pages/mall/category')">
						<image src="../../static/icon/mall_category.png" mode=""></image>
						<view class="upper_text">
							产品分类
						</view>
					</view>
					<view class="upper_item" @click="jumpClick('/pages/user/mall/order/order')">
						<image src="../../static/icon/mall_order.png" mode=""></image>
						<view class="upper_text">
							我的订单
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="complist">
			<view class="til_conview">
				<view class="in-title">
					<view class="text">
						最新上架
					</view>
				</view>
			</view>
			<view class="index_sale" v-if="newList.length > 0">
				<scroll-view scroll-x="true">
					<view class="" style="display: inline-block;width: auto;height: auto;"
						v-for="(item,index) in newList" :key="index">
						<view class="page-column" @click="jumpClick('/pages/mall/detail?goods_id='+item.goods_id)">
							<view class="sale_img">
								<image mode="aspectFill" :src="item.ImageFrist"></image>
							</view>
							<view class="content_sale onelist-hidden">
								<text>{{item.goods_name}}</text>
							</view>
							<text class="price">￥{{item.spec[0].goods_price}}</text>
						</view>
					</view>

				</scroll-view>
			</view>
		</view>

		<view class="complist p-b-50">
			<view class="til_conview">
				<view class="in-title">
					<view class="text">
						随机推荐
					</view>
				</view>
			</view>

			<view class="index_sale" v-if="randomList.length > 0">
				<view class="free-WaterfallFlow">
					<view class="flex-wrap" v-for="(item,index) in randomList" :key="index" v-if="(index + 1)%2 == 1">
						<view class="page-column" @click="jumpClick('/pages/mall/detail?goods_id='+item.goods_id)">
							<view>
								<image mode="widthFix" :src="item.ImageFrist"></image>
							</view>
							<view class="content_raddom">
								<text>{{item.goods_name}}</text>
							</view>
							<text class="price">￥{{item.spec[0].goods_price}}</text>
						</view>
					</view>
				</view>
				<view class="free-WaterfallFlow" style="text-align: right;">
					<view class="flex-wrap" v-for="(item,index) in randomList" :key="index" v-if="(index + 1)%2 == 0">
						<view class="page-column" @click="jumpClick('/pages/mall/detail?goods_id='+item.goods_id)">
							<view>
								<image mode="widthFix" :src="item.ImageFrist"></image>
							</view>
							<view class="content_raddom">
								<text>{{item.goods_name}}</text>
							</view>
							<text class="price">￥{{item.spec[0].goods_price}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="func-fixed" @click="jumpClick('/pages/mall/cart')">
			<uni-icons type="cart" size="30" color="#000000"></uni-icons>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperDotCurrent: 0,
				bannerList: [],
				tabsList: ['今日热卖', '热门推荐'],
				tabsCurrent: 0,
				newList: [],
				randomList: []
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			swiperChange(e) {
				this.swiperDotCurrent = e.detail.current
			},
			getData() {
				let _this = this
				_this.$api.get('mall.index/index', {}).then(res => {
					_this.bannerList = res.data.bannerlist
					_this.newList = res.data.NewList
					_this.randomList = res.data.Randomlist
				}, fail => {})
			},
			jumpClick(url) {
				if (url) {
					uni.navigateTo({
						url: url
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F6F6F6;
	}

	.p-b-50 {
		padding-bottom: 50rpx;
	}

	.complist {
		background-color: #FFFFFF;
		margin-top: 28rpx;

		.til_conview {
			width: 100%;
			border-bottom: 1px solid #eee;

			.in-title {
				font-size: 1em;
				color: #000000;
				border-bottom: 2px solid #000000;
				width: 10em;
				display: block;
				margin: 0 auto;
				line-height: 2em;
				padding: 1em 0 0.7em 3em;

				.text {
					font-weight: bold;
					margin-left: 0.2em;
					font-size: 1.1em;
					margin-left: 0.68em;
				}
			}
		}
	}

	.index_sale {
		padding: 12px;
		display: flex;

		scroll-view {
			width: 100%;
			white-space: nowrap;
		}

		.sale_img {
			border: 1rpx solid #f2f2f2;
			border-radius: 4px;
			overflow: hidden;
			width: 159rpx;
			height: 159rpx;
		}

		.sale_img image {
			width: 100%;
			height: 100%;
		}

		.price {
			margin-top: 10rpx;
			display: block;
			color: #FF0000 !important;
			text-align: center;
		}

		.page-column {
			padding: 0 11rpx 11rpx 0;
		}

		.content_sale {
			width: 170rpx;
			overflow: hidden;

			text {
				font-size: 26rpx;
				margin: 5rpx 10rpx;
				width: 100%;
			}
		}

		.free-WaterfallFlow {
			width: 50%;
			column-count: 1;

			/*column-count 属性规定元素应该被分隔的列数：*/
			.flex-wrap {
				display: inline-block;
				width: 93%;
				/*margin-bottom:20rpx;*/
				border: 1px solid #8A8A8A;
				padding: 2%;
				padding-top: 5%;
				// margin-right: 2%;
				box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(0, 0, 0, 0.06);
				text-align: center;
				vertical-align: top;

				image {
					width: 98%;
					margin: 0 auto;
				}
			}
		}

		.content_raddom {
			overflow: hidden;
		}

	}

	.swiper-content {
		height: 812rpx;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.swiper-box {
		height: 812rpx;
	}

	.swiper-image {
		width: 100%;
		height: 812rpx;
	}

	.uni-swiper__dots-box {
		bottom: 82rpx !important;
	}

	.section_fun {
		margin-top: 742rpx;
		padding: 0 28rpx;

		.fun_content {
			width: 100%;
			background: #FFFFFF;
			box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
			border-radius: 32rpx;

			.fc_upper {
				display: flex;
				justify-content: space-between;
				align-items: center;
				// border-bottom: 2px solid #DDDDDD;

				.upper_item {
					width: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					height: 278rpx;

					image {
						width: 84rpx;
						height: 84rpx;
					}
				}

				.upper_text {
					color: #000000;
					font-weight: 800;
					font-size: 28rpx;
				}
			}

			.border-r {
				border-right: 2px solid #DDDDDD;
			}

			.fc_lower {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.lower_item {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					height: 128rpx;

					image {
						width: 56rpx;
						height: 56rpx;
					}

					.item-content {
						margin-left: 14rpx;

						.text {
							color: #000000;
							font-size: 24rpx;
							font-weight: 800;
						}

						.text-sub {
							color: #8A8A8A;
							font-size: 20rpx;
						}
					}
				}
			}
		}
	}

	.func-fixed {
		position: fixed;
		bottom: 65rpx;
		right: 40rpx;
		z-index: 99;
		width: 80rpx;
		height: 80rpx;
		background: #FAFAFA;
		box-shadow: 0rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.16);
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 48rpx;
			height: 48rpx;
		}
	}
</style>